*{
  margin:0;
  padding:0;
}

$color-primary:#f9ed69; //定义一个变量
$color-secondary:#f08a5d;
$color-tertiary:#b83b5e;
$color-text-light:#eee;

$width-button:150px;

@mixin clearFlex {
   &::after { //添加这个属性会将坍缩的背景颜色找回来
    content:"";
    display:table;
    clear:both;
  }
}

@mixin style-link-text($col) {
  text-decoration:none;
  text-transform:uppercase;
  color:$col;
}

@function divide($a,$b) {
  @return $a / $b * 1px;
}

nav {
  margin:divide(60,2);
  background-color:$color-primary;
  // position:relative;
  
  @include clearFlex;
}

.navigation {
  list-style:none;
  float:left;
  li {
    font-size:30px;
    display:inline;
    margin-left:30px;
    &:hover {
      background-color:$color-secondary;
    }
    &:first-child {
      margin-left:0px;
    }
    a {
      @include style-link-text($color-secondary);
    }
  }
}

.buttons {
   float:right;
  // position:absolute;
  // bottom:0;
  // right:0;
}

%btn-placeholder {
  padding:10px;
  display:inline-block;
  text-align:center;
  border-radius:100px;
  width:$width-button;
  // background-color:$color-secondary;
  @include style-link-text($color-text-light);
}

// .btn-main:link,
// .btn-hot:link,
// .btn-main:visited,
// .btn-hot:visited{ //设置未访问链接样式
//   padding:10px;
//   display:inline-block;
//   text-align:center;
//   border-radius:100px;
//   width:$width-button;
//   // background-color:$color-secondary;
//   @include style-link-text($color-text-light);
// }

.btn-main {
  &:link {
    @extend %btn-placeholder;
    background-color:$color-secondary;
  }
  &:visited {
    @extend %btn-placeholder;
  }
  &:hover {
    background-color:darken($color-secondary,15%);
  }
}

.btn-hot {
  &:link {
    @extend %btn-placeholder;
    background-color:$color-tertiary;
  }
  &:visited {
    @extend %btn-placeholder;
  }
  &:hover {
    background-color:lighten($color-tertiary,10%);
  }
}